iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
2
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 2

VS Code & Terminal for Mac 初步上手——全端產品工具箱 I

  • 分享至 

  • xImage
  •  

只是個幫助忙碌的專業人士和父母找回時間、平衡生活的斜槓老爸。 我探索人生的大小賽局,分享優化人生的實用觀點(關於人類、科技和未來)。

在我的個人網站上獲取最新的觀點:https://klkuo.guru


Visual Studio Code

from Visual Studio Code

由於現階段對於 VS Code 及 Terminal 的操作複雜度不高,從安裝到實作上也較少遇到難以解決的問題,此篇筆記主要整理幾個常用功能及實用快捷鍵,以便需要時查詢。

 

VS Code 常用功能及快捷鍵

1. 同時選取多個相同變數:command⌘ + D

在撰寫類似邏輯、複製 Bootstrap 元件時,常常需要同時修改相同文字或變數,此時 command⌘ + D 就是必學的好用快捷鍵!

VS Code 同時選取多個相同變數

VS Code 同時選取多個相同變數

2. 同時選取多行:option⌥ + 游標點擊

有時候我們不是要編輯一模一樣的文字,而是要針對某幾個段落縮排或作微調,此時就可以使用 option⌥ + 游標點擊 同時選取多行。

VS Code 同時選取多行

VS Code 同時選取多行

3. 在 VS Code 視窗中開啟 Terminal:control + ~

開始使用本地環境(自己的主機)架設 server 和 database 後,同時開啟兩三個 Terminal 以及 text editor 是很正常的,在 VS Code 中開啟 Terminal 能有效增加螢幕的利用率,能避免在各個視窗間反覆切換。

在 VS Code 視窗中開啟 Terminal

在 VS Code 視窗中開啟 Terminal

4. 打開 Command Palette 功能面板查閱需要的功能:shift⇧ + command⌘ + P

在開發的過程中,難免會遇到許多未知的時刻或問題,有時用 shift⇧ + command⌘ + P 打開 Command Palette 功能面板就能得到答案!

VC Code 的 Command Palette 功能面板

VC Code 的 Command Palette 功能面板

 

Terminal for Mac 常用功能及快捷鍵

Terminal 就是可以直接跟電腦溝通的操作介面,有別於平常使用的圖形介面 GUI(例如:利用滑鼠及桌面直覺式的操作),往往需使用各種命令文字 command 來進行操作。善用 Terminal 也是全端工程師的入門必備技能之一,接下來會大量地使用。

1. 進入資料夾:cd

當要操作某專案的檔案時,必須先進入此專案資料夾,才能使用其中的檔案。我們會使用 cd 加上資料夾位置來進入,就是切換目錄(change directory)的指令。

[~] $ cd 路徑/資料夾名稱

Terminal command: cd

Terminal command: cd

2. 新增資料夾:mkdir

接下來會有非常多實作的專案練習,未來除了公司或自己接的專案外,可能也會同時進行自己的 Side project。做好資料夾分類是非常重要的!

我們會使用 mkdir 加上資料夾名稱來新增(make directory)。

[~] $ mkdir 資料夾名稱

3. 新增檔案:touch(macOS 限定)

在建構視覺呈現的模板時,常常需要同時新增多個檔案,此功能就頗好用。我們使用 touch 加上檔案名稱(多個檔案時,在檔名中加空格)來新增。

[~/test] $ touch pic.jpg text.txt main.js style.css index.html

4. 列出資料夾內所有檔案:ls -a

ls -a (list all)可以列出資料夾內包含隱藏檔的所有檔案,在專案啟動時會常常用來檢查是否安裝或啟動成功(例如:git 和 npm 的初始化)。

[~/test] $ ls -a

Terminal command: mkdir, touch, ls

Terminal command: mkdir, touch, ls

5. 移除整個專案資料夾:rm -rf

rm 只能用來刪除檔案,而在刻意練習各教材專案時,會需要刪除整個專案資料夾後重新實作,此時就會用 rm -rf (recursive force) 將資料夾連同每個檔案都強制執行刪除。要特別小心的是,此一指令會將資料夾完全移除,將無法再垃圾桶中找到。

[~] $ rm -rf test

Terminal command: rm -rf

Terminal command: rm -rf

6. 快速開啟 VS Code:code .

在 VS Code 和 Terminal 中分別完成設定後,方可使用 code . 指令在 VS Code 中開啟整個專案內所有檔案。

用 code 指令開啟 VS Code

用 code 指令開啟 VS Code

7. 完全關閉 Terminal:command⌘ + Q

在專案告一段落要休息時,使用 command⌘ + Q 可以快速關閉所有 Terminal,也能有效節省的背景運作的資源。

8. 放大縮小文字 Zoom in & out:command⌘ + "+" or "-"

身為全端開發者,維護良好視力是必須的,善用 command⌘ + "+"可放大 Terminal,讓閱讀更舒適!

command⌘ + "+" 放大 Terminal

command⌘ + "+" 放大 Terminal

 


閱讀更多

Infinite Gamer
關於本系列更多內容及導讀,請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南


上一篇
從程式學徒到產品工匠——成為全端開發者的學習心法 Beta
下一篇
Git 程式碼版本控制 初步上手——全端產品工具箱 II
系列文
用 JavaScript 打造全端產品的入門學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
Bernard
iT邦新手 5 級 ‧ 2020-09-15 22:08:51

很完整的流程!感謝分享。

我要留言

立即登入留言